<template>
    <!-- marketing/pages/group/list/index.wxml -->
    <view>
        <!-- 选项卡 -->
        <view class="tabs">
            <tabs :tabMenu="tabMenu" @checkIndex="checkIndex"></tabs>
        </view>

        <!-- 全部 -->
        <view v-if="tabsIndex == 0" class="list-container">
            <view v-if="allList.length < 1">
                <Upgrading text="暂无拼团活动"></Upgrading>
            </view>
            <group-card :info="item" @invite="onShowShare" v-for="(item, index) in allList" :key="index"></group-card>
        </view>

        <!-- 进行中 -->
        <view v-if="tabsIndex == 1" class="list-container">
            <view v-if="progressList.length < 1">
                <Upgrading text="暂无进行中的拼团"></Upgrading>
            </view>
            <group-card :info="item" @invite="onShowShare" v-for="(item, index) in progressList" :key="index"></group-card>
        </view>

        <!-- 成功 -->
        <view v-if="tabsIndex == 2" class="list-container">
            <view v-if="successList.length < 1">
                <Upgrading text="暂无成功拼团"></Upgrading>
            </view>
            <group-card :info="item" v-for="(item, index) in successList" :key="index"></group-card>
        </view>

        <!-- 失败 -->
        <view v-if="tabsIndex == 3" class="list-container">
            <view v-if="failList.length < 1">
                <Upgrading text="暂无失败拼团"></Upgrading>
            </view>
            <group-card :info="item" v-for="(item, index) in failList" :key="index"></group-card>
        </view>

        <view class="footer-btn-container">
            <button class="btn" @tap="goMore">更多拼团活动</button>
        </view>

        <!-- 分享弹窗 -->
        <group-share-pop class="group-share-pop" :group-id="groupId" :activity-id="activityId"></group-share-pop>
    </view>
</template>

<script>
// import zpMixins from '@/uni_modules/zp-mixins/index';
import tabs from '../../../../components/tabs/tabs';
import groupCard from '../../../components/group-card/index';
import groupSharePop from '../../../components/group-share-pop/index';
import Upgrading from '@/components/upgrading/upgrading';

// marketing/pages/group/list/index.ts
const app = getApp();
import { getMineGroupList } from '../../../../api/marketing/group';
import shareTypes from '../../../../utils/shareTypes';
const dayjs = require('./../../../../utils/dayjs.min.js');
export default {
    components: {
        tabs,
        groupCard,
        groupSharePop,
        Upgrading
    },
    data() {
        return {
            tabMenu: ['全部', '进行中', '拼团成功', '拼团失败'],
            tabsIndex: 0,
            allList: [],
            progressList: [],
            successList: [],
            failList: [],
            queryParam: {
                current: 1,
                size: 10,
                groupStatus: undefined,
                sellerId: app.globalData.sellerId,
                userId: uni.getStorageSync('memberId')
            },
            totalPage: 0,
            queryParam1: {
                current: 1,
                size: 10,
                groupStatus: 1,
                sellerId: app.globalData.sellerId,
                userId: uni.getStorageSync('memberId')
            },
            totalPage1: 0,
            queryParam2: {
                current: 1,
                size: 10,
                groupStatus: 2,
                sellerId: app.globalData.sellerId,
                userId: uni.getStorageSync('memberId')
            },
            totalPage2: 0,
            queryParam3: {
                current: 1,
                size: 10,
                groupStatus: 3,
                sellerId: app.globalData.sellerId,
                userId: uni.getStorageSync('memberId')
            },
            totalPage3: 0,
            activityId: 0,
            groupId: 0
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {
        this.queryParam.userId = uni.getStorageSync('memberId');
        this.queryParam1.userId = uni.getStorageSync('memberId');
        this.queryParam2.userId = uni.getStorageSync('memberId');
        this.queryParam3.userId = uni.getStorageSync('memberId');
    },
    onShow() {
        this.resetQueryParam();
    },
    onReachBottom() {
        switch (this.tabsIndex) {
            case 0:
                if (this.queryParam.current < this.totalPage) {
                    this.setData({
                        queryParam: {
                            ...this.queryParam,
                            current: this.queryParam.current + 1
                        }
                    });
                    this.getAllList();
                }
                break;
            case 1:
                if (this.queryParam1.current < this.totalPage1) {
                    this.setData({
                        queryParam1: {
                            ...this.queryParam1,
                            current: this.queryParam1.current + 1
                        }
                    });
                    this.getProgressList();
                }
                break;
            case 2:
                if (this.queryParam2.current < this.totalPage2) {
                    this.setData({
                        queryParam2: {
                            ...this.queryParam2,
                            current: this.queryParam2.current + 1
                        }
                    });
                    this.getSuccessList();
                }
                break;
            case 3:
                if (this.queryParam3.current < this.totalPage3) {
                    this.setData({
                        queryParam3: {
                            ...this.queryParam3,
                            current: this.queryParam3.current + 1
                        }
                    });
                    this.getFailList();
                }
                break;
        }
    },
    onShareAppMessage() {
        const { activityId, groupId } = this;
        console.log(activityId, groupId, shareTypes.PINGTUAN);
        return {
            title: '参团邀请',
            imageUrl: 'http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/invitation/activity.png',
            path: `/pages/sharePage/sharePage?groupId=${groupId}&activityId=${activityId}&ST=${shareTypes.PINGTUAN}`
        };
    },
    methods: {
        resetQueryParam() {
            let { queryParam, queryParam1, queryParam2, queryParam3 } = this;
            queryParam.current = 1;
            queryParam1.current = 1;
            queryParam2.current = 1;
            queryParam3.current = 1;
            this.setData({
                totalPage: 0,
                totalPage1: 0,
                totalPage2: 0,
                totalPage3: 0
            });
            this.getAllList();
            this.getProgressList();
            this.getSuccessList();
            this.getFailList();
        },

        goMore() {
            uni.navigateTo({
                url: '/marketing_page/pages/group/more/index'
            });
        },

        onShowShare(data) {
            const { activityId, groupId } = data.detail;
            this.setData({
                activityId,
                groupId
            });
            const child = this.selectComponent('.group-share-pop');
            child.showPop();
        },

        checkIndex(e) {
            let { detail: tabsIndex } = e;
            this.setData({
                tabsIndex
            });
        },

        async getAllList() {
            const { code, data } = await getMineGroupList({
                ...this.queryParam
            }).catch((err) => {});
            if (code === 200) {
                const allList = data.records.map((item) => {
                    item.countDown = dayjs(item.endGroupTime).valueOf() - dayjs().valueOf();
                    return item;
                });
                this.setData({
                    allList: allList,
                    totalPage: data.totalPage
                });
            }
        },

        async getProgressList() {
            const { code, data } = await getMineGroupList({
                ...this.queryParam1
            }).catch((err) => {});
            if (code === 200) {
                const progressList = data.records.map((item) => {
                    item.countDown = dayjs(item.endGroupTime).valueOf() - dayjs().valueOf();
                    return item;
                });
                this.setData({
                    progressList: progressList,
                    totalPage1: data.totalPage
                });
            }
        },

        async getSuccessList() {
            const { code, data } = await getMineGroupList({
                ...this.queryParam2
            }).catch((err) => {});
            if (code === 200) {
                this.setData({
                    successList: data.records,
                    totalPage2: data.totalPage
                });
            }
        },

        async getFailList() {
            const { code, data } = await getMineGroupList({
                ...this.queryParam3
            }).catch((err) => {});
            if (code === 200) {
                this.setData({
                    failList: data.records,
                    totalPage3: data.totalPage
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
/* marketing/pages/group/list/index.wxss */
.list-container {
    width: 100%;
    margin: 10rpx auto;
}
.footer-btn-container {
    width: 750rpx;
    height: 120rpx;
    background: linear-gradient(0deg, #ffffff, #f4f6f8);
    border: 2rpx solid rgba(255, 255, 255, 0.55);
    box-shadow: 0rpx -25rpx 67rpx 0rpx rgba(177, 182, 190, 0.2);
    position: fixed;
    bottom: 0rpx;
    display: flex;
    z-index: 999;

    .btn {
        width: 686rpx;
        height: 88rpx;
        background: linear-gradient(105deg, #268ae8, #1487fa);
        box-shadow: 0px 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
        border-radius: 44rpx;
        text-align: center;
        line-height: 88rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
        margin: auto auto;
    }
}

/deep/.u-count-down__text{
    font-weight: bold;
    color: #ffffff;
}
</style>
